<template>
	<div class="coupon-dialog">
    <van-popup
      v-model="dialogVisible"
      class="coupon-pop"
      position="bottom"
      :style="{ height: '80vh'}"
    >
    <div class="coupon-wrap">
      <div class="coupon-wrap-close" @click="closeDialog">
        <span class="img-close"></span>
      </div>
      <div class="coupon-wrap-top">优惠券</div>
      <ul class="coupon-wrap-con unused-coupon">
        <li v-for="(couponItem,index) in couponData" :key="index" class="coupons-li">
          <div class="coupons-item">
            <section :class="couponItem.coupon_type==3?'coupons-box coupon-pack':'coupons-box'">
              <section class="coupon-left">
                <h1 v-if="couponItem.promotion_type==1" 
                :class="couponItem.coupon_type==3?'padding':''"
                class="coupon-price">{{couponItem.value}}<span class="txt">折</span></h1>
                <h1 v-else class="coupon-price" :class="couponItem.coupon_type==3?'padding':''" v-html="scaleGoodsPriceFn(couponItem.value)"></h1>
                <div v-if="couponItem.coupon_type!=3">
                  <p v-if="couponItem.at_least>0">满{{couponItem.at_least}}元使用</p>
                  <p v-else>不限订单金额</p>
                </div>
              </section>
              <section class="coupon-right">
                <section class="coupon-l">
                  <div class="name">
                    <h4>{{couponItem.title}}</h4>
                    <p>{{couponItem.start_time}} 至 {{couponItem.end_time}}</p>
                  </div>
                  <span class="explain">仅在有效时间内使用</span>
                </section>
                <section class="coupon-r">
                  <van-button class="btn" @click="clickGetCoupon(couponItem.coupon_id)" color="linear-gradient(to right, #F82337, #FF2D59)" round >立即领取</van-button>
                </section>
              </section>
            </section>
          </div>
          <div class="coupon-tip" v-if="couponItem.description">{{couponItem.description}}</div>
        </li>
      </ul>
      <div class="coupon-wrap-bottom">
        <div class="btn buy-gra-btn" @click="handleClickSubmit">完成</div>
      </div>
    </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-06 17:48:05
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2019-12-06 17:48:05
   */
  
  import { scaleGoodsPrice } from '@/utils/index'
  import { exchangeCoupon } from '@/api/user/member/memberApi'
  export default Vue.extend({
    name: 'index',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      couponData: {
        type: Array
      }
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    mounted() {
      this.dialogVisible = this.visible
    },
    watch: {
      dialogVisible(val) {
        this.$emit('update:visible', val)
      },
      visible(val) {
        this.dialogVisible = val
      }
    },
    methods: {
      /**
       * 商品价格 整数放大
       */
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      },
      /**
       * 确认按钮，关闭弹窗
       */
      handleClickSubmit() {
        this.dialogVisible = false
      },
      // 点击关闭按钮
      closeDialog() {
        this.dialogVisible = false
      },
      // 领取优惠券
      clickGetCoupon(id) {
        const params = { id: id }
        exchangeCoupon(params).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('恭喜你，领取成功')
          } else {
            this.$Error(res.msg)
          }
        })
      }
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .coupon-dialog{
    .coupon-pop{
      .price-scale{
        display:block;
        color: #fff;
        font-weight: bold;
        overflow: hidden;
        @include lineClamp(28px,56px,1);
        height: 56px;
      }
      .num-font{
        font-size:50px;
      }
    }
  }
</style>
<style  lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  @import "src/styles/user/coupons/index.scss";
  .coupon-dialog{
    background: #fff;
    position: relative;
    .coupon-pop{
      overflow:hidden;
      border-radius:20px 20px 0 0;
    }
    .coupon-wrap{
      .coupon-wrap-close{
        position:absolute;
        right:30px;
        top:34px;
        // width:28px;
        // height:28px;
        .icon-close{
          font-size:32px;
          color:#999;
        }
        .img-close{
          display: inline-block;
          width: 28px;
          height: 28px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/common/close-icon.png) no-repeat center;
          background-size: 100% 100%;
        }
      }
      &-top{
        padding: 30px 0;
        border-bottom:2px solid #EDEDED;
        text-align: center;
        font-size: 32px;
        color: #333;
      }
      .coupon-wrap-con{
        padding:30px;
        height: calc(80vh - 200px);
        overflow: auto;
      }
      .coupon-wrap-bottom{
        position: absolute;
        width: 100%;
        padding: 10px 24px;
        left:0;
        bottom: 0;
        border-top:2px solid #EDEDED;
        box-sizing: border-box!important;
        background: #fff;
        .btn{
          padding: 24px 0;
          font-size: 30px;
          line-height: 30px;
          font-weight: 500;
          color: #f5f5f5;
          border-radius: 60px;
          text-align: center;
        }
      }
    }
  }
</style>
